<template>
	<view class="search">
		<view class="s-header">
			<v-input ref="vInput"
				:query="query"
				@query="queryChange"
				:placeholder="placeholder">
			</v-input>
		</view>
		<view class="s-hot">
			<view class="h-title">热门搜索</view>
			<view class="h-wrap">
				<view class="w-key" v-for="(item, index) in hotSearch" :key="index"
				  @click="setQuery(index)">
					<text>{{item.keyword}}</text>
				</view>
			</view>
		</view>
		<view class="s-result" v-if="searchResult.length === 0 ? 0:1">
			{{searchResult}}
		</view>
	</view>
</template>

<script>
import vInput from "../../components/v-search-input/v-search-input.vue"
/* API data */
import {hotKeydata} from '../../api/data/hotKeyData.js'

export default {
	components: {
		vInput
	},
	data() {
		return {
			query: '',
			placeholder: '',
			hotSearch: [],
			searchResult: []
		}
	},
	created() {
		this._getHotKey()
		this._setHotKey()
	},
	methods: {
		queryChange(query) {
			this.query = query
			uni.showToast({title: "正在搜索...", icon: 'loading'})
		},
		_getHotKey() {
			this.hotSearch = hotKeydata
		},
		_setHotKey() {
			this.placeholder = this.hotSearch[0].keyword
		},
		setQuery(index) {
			//console.log(this.hotSearch[index].keyword);
			this.$refs.vInput.setQuery(this.hotSearch[index].keyword)
			uni.showToast({title: "正在搜索...", icon: 'loading'})
		}
	}
}
</script>

<style lang="less" scoped>
@import "./search";
</style>
